<template>
        <div class="sstbwz" @click="djtzssym"><svg t="1676954382915" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2775" width="20" height="20"><path d="M966.4 924.8l-230.4-227.2c60.8-67.2 96-156.8 96-256 0-217.6-176-390.4-390.4-390.4-217.6 0-390.4 176-390.4 390.4 0 217.6 176 390.4 390.4 390.4 99.2 0 188.8-35.2 256-96l230.4 227.2c9.6 9.6 28.8 9.6 38.4 0C979.2 950.4 979.2 934.4 966.4 924.8zM102.4 441.6c0-185.6 150.4-339.2 339.2-339.2s339.2 150.4 339.2 339.2c0 89.6-35.2 172.8-92.8 233.6-3.2 0-3.2 3.2-6.4 3.2-3.2 3.2-3.2 3.2-3.2 6.4-60.8 57.6-144 92.8-233.6 92.8C256 780.8 102.4 627.2 102.4 441.6z" p-id="2776"></path></svg></div>
    <div style="margin-bottom: 60px;" class="fxsmss">
        <van-tabs v-model:active="lbxz" animated @click-tab="djitem">
            <van-tab v-for="(item, index) in years" :title="`${item}`" :key="index">
                <div class="zwm" v-for="(i,k) in ndlz" :key="k" @click="djzjml(i)">
                    <div class="mglz">
                        <div class="imgwb">
                            <img :src="i?.cover"
                                alt="">
                            <div class="top-left-text">#连载中</div>
                            <div class="bottom-left-text">《{{i?.title}}》</div>
                        </div>

                        <div class="xmtext">
                            <div class="top-text">
                                <span>{{ i?.forward }}</span>
                            </div>
                            <div class="bottom-text">
                                <span>{{i?.subtitle}}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </van-tab>
        </van-tabs>



        <van-tabbar v-model="active">
            <van-tabbar-item @click="djtz('/home')" icon="home-o">首页</van-tabbar-item>
            <van-tabbar-item @click="djtz('/faxian')" icon="apps-o">发现</van-tabbar-item>
            <van-tabbar-item @click="djtz('/lianzai')" icon="coupon-o">连载</van-tabbar-item>
            <van-tabbar-item @click="djtz('/wode')" icon="contact">我的</van-tabbar-item>
        </van-tabbar>


    </div>
</template>

<script setup>
import axios from '../plugins/axiosInstance';
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router'
const active = ref(2);
const lbxz = ref(0);
const router = useRouter()
const years = ref([]);
let ndlz = ref([]);

for (let year = new Date().getFullYear(); year >= 2016; year--) {
    years.value.push(year);
}

// 点击连载进入章节目录 i是目录id
const djzjml = (i) => {
    localStorage.setItem('lzmuluId',JSON.stringify(i?.serial_id))
    localStorage.setItem('lzmulutitle',JSON.stringify(i?.title))
    router.push('/lzmulu')
}

function djtz(url) {
    router.push(url)
}

const djtzssym = () => {
    router.push('/sousuoyemian')
}

// 年度列表，传年进去获取列表
function djitem(obj) {
    axios({
        url: `https://apis.netstart.cn/one/find/serial/byyear/${obj?.title}`,
        method: 'get'
    }).then((res) => {

        ndlz.value = res?.data.data
    }).catch(()=>{})
}
onMounted(() => {
    djitem({title:new Date().getFullYear()})
})
</script>

<style lang="less" scoped>
.zwm {
    box-sizing: border-box;
    padding: 10px;

    .mglz {
        width: 100%;
        border-radius: 10px;
        box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
        .imgwb {
            border-radius: 10px 10px 0 0;
            position: relative;
            height: 150px;
            width: 100%;
            display: flex;
            /* 设置容器为 flex 容器 */
            align-items: center;
            /* 垂直居中 */
            justify-content: center;
            /* 水平居中 */
            overflow: hidden;

            /* 隐藏超出容器范围的部分 */
            img {
                object-fit: cover;
                /* 按照容器宽高比例进行裁剪，尽可能覆盖整个容器 */
                width: 100%;
                /* 设置图片宽度为 100%，占满容器 */
                height: 100%;
                /* 设置图片高度为 100%，占满容器 */
            }

            .top-left-text {
                position: absolute;
                top: 10px;
                /* 距离顶部10px */
                left: 10px;
                /* 距离左边10px */
                font-size: 12px;
                /* 字体大小为12px */
                color: white;
            }

            .bottom-left-text {
                position: absolute;
                bottom: 10px;
                /* 距离底部10px */
                left: 10px;
                /* 距离左边10px */
                font-size: 16px;
                /* 字体大小为14px */
                color: white;
            }
        }
    }

    .xmtext {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 50px;
        width: 100%;
        border-radius: 0 0 10px 10px;
        position: relative;

        .top-text,
        .bottom-text {
            position: absolute;
            left: 10px;
            width: calc(100% - 10px);
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }

        .top-text {
            top: 5px;
            color: #919191;
            font-size: 14px;
        }

        .bottom-text {
            bottom: 5px;
            color: #bdbdbd;
            font-size: 12px;
        }
    }
}

.sstbwz{
    position: absolute;
    right: 0;
    top: 0;
    width: 50px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999;
}

</style>